博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动商城第八篇【添加商品之基本属性和大字段数据(FCK文本编辑器)】
阅读量:4626 次
发布时间:2019-06-09

本文共 5495 字,大约阅读时间需要 18 分钟。

添加商品

修改对应的超链接url,controller转发到对应的JSP页面

添加商品
/**     * 跳转到添加商品页面     * @return     */    @RequestMapping("/toAddItem.do")    public String toAddItem() {        return "item/addItem";    }

我们发现添加商品页面是由4个选项卡组成:

这里写图片描述

基本信息

在基本信息的选项卡中,还是需要我们查询所有的品牌数据,在页面上给用户选择:

上传文件

我们在添加品牌的时候已经做过了上传文件的功能了,逻辑大致是一样的,我们拿过来修改一些东西即可!

在表单form标签中,记得要使用以下的数据类型进行表单提交!

enctype="multipart/form-data"

修改对应的name名称

请上传图片宽为120px,高为50px,大小不超过100K。

Jquery代码:

function submitUpload() {
var opt = { //重新指定form的action的值 url: "${path}/upload/uploadPic.do", type: "post", dateType: "json", success: function (responseText) {
var jsonObj = $.parseJSON(responseText.replace(/<.*?>/ig, "")); $("#imgsImgSrc").attr("src", jsonObj.realPath); $("#imgs").val(jsonObj.relativePath); }, error: function () {
alert("系统错误"); } }; $("#form111").ajaxSubmit(opt); }

这里写图片描述

添加基本属性测试

到目前位置,我们的Controller可以拿到Item页面全部的基本属性:

这里写图片描述

这里写图片描述

商品基本属性中的隐藏属性

商品的id是使用oracle中的序列进行自动增长

/*对于商品的id,我们是自增长的。*/        
select seqitemid.nextval from dual

对于审核状态,默认设置为0【待审核】

对于上架状态,默认设置为1【下架】
对于销售量,默认设置为0【并没有人购买】

在Mapper中把对应的属性设置默认值

(#{
itemId,jdbcType=DECIMAL}, #{
itemName,jdbcType=VARCHAR}, #{
itemNo,jdbcType=VARCHAR}, #{
brandId,jdbcType=DECIMAL}, #{
catId,jdbcType=DECIMAL}, #{
tagImgId,jdbcType=DECIMAL}, #{
tagImg,jdbcType=DECIMAL}, #{
isNew,jdbcType=DECIMAL}, #{
isGood,jdbcType=DECIMAL}, #{
isHot,jdbcType=DECIMAL}, #{
promotion,jdbcType=VARCHAR}, 0, 1, #{
imgs,jdbcType=VARCHAR}, #{
keywords,jdbcType=VARCHAR}, #{
pageDesc,jdbcType=VARCHAR}, #{
itemRecycle,jdbcType=DECIMAL}, #{
onSaleTime,jdbcType=TIMESTAMP}, #{
checkTime,jdbcType=TIMESTAMP}, #{
updateTime,jdbcType=TIMESTAMP}, #{
updateUserId,jdbcType=DECIMAL}, sysdate, #{
checkerUserId,jdbcType=DECIMAL}, #{
fullPathDeploy,jdbcType=VARCHAR}, #{
fullPathDeployOffer,jdbcType=VARCHAR}, #{
originalItemId,jdbcType=DECIMAL}, #{
lastStatus,jdbcType=DECIMAL}, #{
merchantId,jdbcType=DECIMAL}, #{
itemSort,jdbcType=DECIMAL}, 0, #{
createUserId,jdbcType=DECIMAL}, #{
simLevel,jdbcType=DECIMAL}, #{
giftDesc,jdbcType=VARCHAR}, #{
giftImg,jdbcType=VARCHAR}, #{
giftShowType,jdbcType=VARCHAR}, #{
imgSize1,jdbcType=VARCHAR} )

大字段数据

我们第二个选项卡的原型界面如下:

这里写图片描述

我们需要用到另外一张表:

这里写图片描述

因此我们需要逆向工程对应的表:

加载对应的映射文件:

这里写图片描述

Dao层

id是EbItemClob无法从页面上获取的,因此我们需要传递进去。

@Repositorypublic class EbItemClobDaoImpl extends SqlSessionDaoSupport implements EbItemClobDao {
String nameSpace = "com.rl.ecps.sqlMap.sqlMap.EbItemClobMapper."; public void saveItemClob(EbItemClob ebItemClob, Long itemId) { ebItemClob.setItemId(itemId); this.getSqlSession().insert(nameSpace + "insert", ebItemClob); }}

fckEditor文本编辑器

其实就是一个文本域,而该文本域是能带有格式的。以前我们使用过“富文本编辑器”就是这么的一种,这次我们使用fckEditor文本编辑器

首先,把我们的下载下来的文档加入到web目录下。

这里写图片描述

引入核心的JS文件

创建出FCK对象,设置相关属性:

var fck = new FCKeditor("itemDesc");            fck.BasePath = "${path}/ecps/console/res/plugins/fckeditor/";            fck.Config["ImageUploadURL"] = "${path}/upload/uploadForFck.do?typeStr=Image";            fck.Height = 400;            fck.ToolbarSet = "Default";            fck.ReplaceTextarea();

itemDesc就是我们文档域的id值:

创建出处理uploadForFck.do的方法:

  • 需要使用到工具类UploadResponse
@RequestMapping("/uploadForFck.do")    public void uploadForFck(HttpServletRequest request, HttpServletResponse response) throws IOException {        //把request转换成复杂request        MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;        //获得文件        Map
map = mr.getFileMap(); Set
set = map.keySet(); Iterator
it = set.iterator(); String fileInputName = it.next(); MultipartFile imgsFile = map.get(fileInputName); //上传文件的名字是不能相同的,因此我们设置一下文件的名称 String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date()); Random random = new Random(); for(int i = 0; i < 3; i++){ fileName = fileName + random.nextInt(10); } //拿到该文件的原始名称 String originalFilename = imgsFile.getOriginalFilename(); //获取该文件的后缀 String suffix = originalFilename.substring(originalFilename.lastIndexOf(".")); /*** * 绝对路径是留给页面src属性做显示的 * 相对路径是保存在数据库中,通过input来进行提交的。 */ //获得上传文件的绝对路径 String realPath = ResourcesUtils.readProp("file_path")+"/upload/"+fileName+suffix; //获得相对路径 String relativePath = "/upload/"+fileName+suffix; //创建jersy的客户端 Client client = Client.create(); //创建web资源对象 WebResource wr = client.resource(realPath); //拿到文件的二进制数据,使用web资源对象上传 byte[] bytes = imgsFile.getBytes(); wr.put(bytes); /** * 在FCK中,我们就不再是使用JSON来返回了,我们使用的是内部的对象 */ UploadResponse ur = new UploadResponse(UploadResponse.EN_OK,realPath); response.getWriter().print(ur); }

这里写图片描述

这里写图片描述

在controller中使用EbItemClob对象,即可接收我们的大字段数据!

@RequestMapping("/addItem.do")        public void addItem(EbItem ebItem, EbItemClob ebItemClob) {    }

转载于:https://www.cnblogs.com/zhong-fucheng/p/7554327.html

你可能感兴趣的文章
CSS3关于过渡效果的问题
查看>>
sql-case when 条件1 then 取值1 when 条件2 then 取值2 else 取值3 end
查看>>
[HNOI 2010]Bounce 弹飞绵羊
查看>>
VIM7.3添加中文帮助文档
查看>>
kdress学习
查看>>
Java第四次实验
查看>>
Welcome to Swift (苹果官方Swift文档初译与注解三十四)---241~247页(第五章-- 函数)
查看>>
ibatis源码浅析- 初探
查看>>
Linux必知必会的目录与启动过程
查看>>
lemp-------3多站点访问,,访问控制,,虚拟目录
查看>>
爬虫之数据解析(三种方式)
查看>>
jQuery中的常用内容总结(一)
查看>>
[转载] Tmux 速成教程:技巧和调整
查看>>
分布式技术追踪 2017年第十二期
查看>>
分布式技术一周技术动态 2016-11-27
查看>>
20169212 2016-2017-2 《网络攻防实践》第四周学习总结
查看>>
如何用git命令行上传本地代码到github
查看>>
JS 图像延迟加载
查看>>
第二次作业
查看>>
完全理解 Python 迭代对象、迭代器、生成器(转)
查看>>